<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人注册</title>
		<!-- 网站favicon图标，务必放在项目根目录下且是ico后缀的图片 -->
		<!-- 在任何网站域名后加上/favicon.ico可查看该网站的favicon图标 -->
		<link rel="shortcut icon" href="favicon.ico" />
		<!-- 引入初始化样式 -->
		<link rel="stylesheet" type="text/css" href="./css/base.css" />
		<!-- 引入公共样式 -->
		<link rel="stylesheet" type="text/css" href="./css/common.css" />
		<!-- 引入list样式 -->
		<link rel="stylesheet" type="text/css" href="./css/register.css" />
	</head>
	<body>
		<!-- 头部模块开始 -->
		<header class="header w">
			<!-- logo模块开始 -->
			<div class="logo">
				<a href="index.html"><img src="images/logo.png"></a>
			</div>
			<!-- logo模块结束 -->
		</header>
		<!-- 头部模块结束 -->
		<div class="registerarea w">
			<h3>注册新用户
				<div class="login fr">
					我有账号,去<a href="#" class="style_red">登录</a>
				</div>
			</h3>
			<div class="regi_form">
				<form action="">
					<ul>
						<li class="text">
							<label for="tele">手机号：</label>
							<input type="text" autocomplete="off" id="tele">
							<span class="error">手机号码格式不正确，请重新输入
							</span>
						</li>
						<li class="text">
							<label for="message">短信验证码：</label>
							<input type="text" autocomplete="off" id="message">
							<span class="error">请正确输入六位验证码 </span>
						</li>
						<li class="text">
							<label for="password">登陆密码：</label>
							<input type="password" id="password">
							<span class="error">
								密码至少8个字符，至少1个字母，1个数字和1个特殊字符
							</span>
						</li>
						<li class="safe">
							<strong>安全程度</strong>
							<em class="weak">弱</em>
							<em class="medium">中</em>
							<em class="strong">强</em>
						</li>
						<li class="text">
							<label for="passwordConfirm">确认密码：</label>
							<input type="password" id="passwordConfirm">
							<span class="error">密码不一致，请重新输入 </span>
						</li>
						<li class="agree">
							<input type="checkbox" class="check">
							同意协议并注册
							<a href="#">《知晓用户协议》</a>
						</li>
						<li class="finish">
							<input type="submit" value="完成注册" class="submit" />
						</li>
					</ul>
				</form>
			</div>
		</div>
		<!-- mod_copyright部分开始 -->
		<div class="mod_copyright w">
			<div class="links">
				<ul>
					<li><a href="#">关于我们</a></li>
					<li><a href="#"></a></li>
					<li><a href="#">联系我们</a></li>
					<li><a href="#"></a></li>
					<li><a href="#">联系客服</a></li>
					<li><a href="#"></a></li>
					<li><a href="#">商家入驻</a></li>
					<li><a href="#"></a></li>
					<li><a href="#">营销中心</a></li>
					<li><a href="#"></a></li>
					<li><a href="#">手机品优购</a></li>
					<li><a href="#"></a></li>
					<li><a href="#">友情链接</a></li>
					<li><a href="#"></a></li>
					<li><a href="#">销售联盟</a></li>
					<li><a href="#"></a></li>
					<li><a href="#">品优购社区</a></li>
					<li><a href="#"></a></li>
					<li><a href="#">品优购公益</a></li>
					<li><a href="#"></a></li>
					<li><a href="#">English&nbsp;Site</a></li>
					<li><a href="#"></a></li>
					<li><a href="#">Contact&nbsp;U</a></li>
				</ul>
			</div>
			<div class="copyright">
				<p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱:zhanghj+itcast.cn</p>
				<p>京ICP备08001421号京公网安备110108007702</p>
			</div>
		</div>
		<!-- mod_copyright部分结束 -->
	</body>

	<script src="./js/jquery.min.js"></script>
	<script type="text/javascript">
		$(".text").on({
			"focus": function() {
				$(this).css("borderColor", "rgb(61, 127, 255)");
				// 隐藏错误信息
				$(this).siblings(".error").hide();
			},
			"blur": function() {
				$(this).css("borderColor", "#ccc");
				var _this = $(this);
				// 显示错误信息
				function handle() {
					$(_this).siblings(".error").show();
				}
				$.ajax({
					// 地址
					url: 'http://127.0.0.1:8000/jquery',
					// 参数
					data: {
						password: $("#password").val(),
						type: $(this).attr("id"),
						text: $(this).val()
					},
					// 请求类型
					type: 'GET',
					// 数据类型
					dataType: 'JSON',
					// 成功函数
					success: function(data) {
						data ? handle() : null;
					},
					// 超时时间
					timeout: 2000,
					// 失败函数
					error: function() {
						alert('出错了！');
					}
				});
			},
			"keydown": function(event) {
				if (event.keyCode === 13) {
					// 取消默认操作
					event.preventDefault();
					// next不连续情况
					if ($(this).attr("id") === "password") {
						$(this).blur();
						$("#passwordConfirm").focus();
					};
					// 当前文本框失焦,下一文本框聚焦
					$(this).blur().parents("li.text").next("li.text").children("input").focus();
				}
			}
		}, "input");
		// 显示密码强弱
		$("#password").on("input propertychange", function(event) {
			var weakReg = /(?=.*[A-Za-z])|(?=.*[0-9])|(?=.*[$@/\\.!%*#?&])/;
			var mediumReg = /(?=.*[A-Za-z])(?=.*[0-9])|(?=.*[0-9])(?=.*[$@/\\.!%*#?&])|(?=.*[A-Za-z])(?=.*[$@/\\.!%*#?&])/;
			var strongReg = /(?=.*[A-Za-z])(?=.*[0-9])(?=.*[$@/\\.!%*#?&])/;
			if ($(this).val() === "") {
				$(".safe").hide();
			};

			function regTest(reg, str) {
				if (reg.test($(this).val())) {
					$(".safe").show();
					$(".safe ." + str + "").css("visibility", "visible");
					$(".safe ." + str + "").siblings("em").css("visibility", "hidden");
				};
			};
			regTest.call(this, weakReg, 'weak');
			regTest.call(this, mediumReg, 'medium');
			regTest.call(this, strongReg, 'strong');
		});
	</script>
</html>
